<template>
    <div style="display: flex;justify-content: space-between;">
    <div class="page-title">一键清台</div>
    <el-form-item class="search-form-item search-form-raodio" > 
        <el-button type="primary"  class="close-status" style="background:#ccc;" @click="handleRoom" v-if="lockText == '关闭' ">开启小程序点单</el-button>
            <el-button type="primary"  class="close-status" @click="handleRoom" v-else>关闭小程序点单</el-button>
                </el-form-item> 
            </div>
    <el-form class="search-form" inline :model="searchForm">
        <div>
            <el-form-item class="search-form-item" label="选择区域:">
                <el-select v-model="searchForm.areaCode" filterable clearable>
                    <el-option v-for="item in area_options" :key="item.roomAreaCode" :value="item.roomAreaCode"
                        :label="item.roomAreaName" />
                </el-select>
            </el-form-item>

            <el-form-item class="search-form-item" label="房台状态:">
                <el-select v-model="searchForm.roomState" filterable clearable>
                    <el-option v-for="item in roomStateOptions" :key="item.roomStateCode" :value="item.roomStateCode" :label="item.roomStateName" />
                </el-select>
            </el-form-item>
            <!-- <el-form-item class="search-form-item" label="营业日期:"> 
                <el-date-picker v-model="searchForm.timeRange" type="datetimerange" start-placeholder="开始时间"
                    end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable /> 
            </el-form-item> --> 

            <el-form-item class="action-btn-box">
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button class="reset-btn" @click="handleReset">清空筛选</el-button>
                <el-button type="primary" @click="handleResetAll">清台</el-button>
            </el-form-item>
        </div>
    </el-form>
    <div class="table-box">
        <el-table :data="tableData" stripe v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" label="全选" min-width="5%" />
            <el-table-column prop="roomName" label="桌台" min-width="32%" />
            <el-table-column prop="typeName" label="所属区域" min-width="30%" />
            <el-table-column prop="roomStateDesc" label="房台状态" min-width="30%" />
            <!-- <el-table-column prop="" label="操作" min-width="16%" fixed="right">
                <template #default="scope">
                    <el-button class="action-btn" @click="handleDetail"> 退款</el-button>
                </template>
            </el-table-column> -->
        </el-table>
    </div>

    <!-- <div class="orderRecords-container-footer">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next,sizes, jumper"
            :total="total">
        </el-pagination>
        <button class="footer-button">确定</button>
    </div> -->

    <AllTableSelect v-model="allTableSelectShow" @cancel="allTableSelectShow = false" @confirm="selectTable" />   
    <ResetAllDialog ref="ResetAllRef" v-if="ResetAllVisible" :visible="ResetAllVisible" :multipleSelection="multipleSelection" @emitCancel="emitResetAllCancel" @emitSubmit="emitResetAllSubmit" />
    <div class="diglog-ontainer">
        <el-dialog v-model="diglogvisible" title="提示" center :show-close="false" :before-close="handleCancel">
            <div class="content-box" v-if="lockText == '关闭' ">
                请确认<text style="color: #ff6e0e;">开启</text>操作？
            </div>
            <div class="content-box" v-else>
                请确认<text style="color: #ff6e0e;">关闭</text>操作？
            </div>
            <div class="footer-box">
                <el-button class="cancel" @click="diglogvisible = false">取消</el-button>
                <el-button class="submit" @click="handleSubmit">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script setup>
import AllTableSelect from '@/views/components/AllTableSelect.vue'
import ResetAllDialog from '@/views/workbench/cashier/dialog/resetAllDialog.vue'
import Api from '@/api'
// import { transformWorkTime } from '@/utils/chenhao.js'
import useConfigStore from '@/store/config'
const configStore = useConfigStore()
const shopInfo = useConfigStore().shopInfo


// const orgStartTime = configStore.shopInfo.orgReportStartTime
// const orgEndTime = configStore.shopInfo.orgReportEndTime  

// 获取区域列表
let area_options = ref([])
const get_area_options = (params) => {
    Api.Common.PcObjProcess.Do({ "functionName": "getRoomArea", "orgCode": "0004", "contentData": "" }).then(res => {
        // console.log('获取区域OPTIONS res :>> ', res,);  
        area_options.value = res.result
        area_options.value.unshift( {roomAreaCode: ' ', roomAreaName: '全部', state: '1', StateName: '正常'}) // 接口可以补充改状态 前端自行处理的话,此处一定是' ' 
    })
}
get_area_options()

const roomStateOptions = ref()
const getRoomStateList = () => {
    // Api.Common.PcObjProcess.Do({ "functionName": "getRoomArea", "orgCode": "0004", "contentData": "" }).then(res => {  area_options.value = res.result })
    roomStateOptions.value = [
        { roomStateCode: '99', roomStateName: '全部' },// 此处特殊业务补充的roomStateCode：99
        { roomStateCode: '1', roomStateName: '已预订' },
        { roomStateCode: '2', roomStateName: '使用中' },
        { roomStateCode: '3', roomStateName: '未支付'}
    ]
}
getRoomStateList() 

// 点击选择桌台
const allTableSelectShow = ref(false)
// 选中桌台
const selectTable = (data) => {
    if (data.name) {
        console.log(data);
        searchForm.value.roomCode = data.code
        searchForm.value.roomName = data.name
        allTableSelectShow.value = false
    } else {
        ElNotification({
            title: '提示',
            message: '请选择桌号',
            type: 'warning',
        })
    }

}

let loading = ref(false)
let searchForm = ref({})
// 搜索
const handleSearch = (params) => {
    currentPage.value = 1;
    getTableData();
}
// 重置
const handleReset = (params) => {
    searchForm.value = {}
    handleSearch()
}
// 查询表格数据
let tableData = ref([{}])
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getTableData()
}
const getTableData = ( ) => {
    let query = {
        ...searchForm.value,
        pageIndex: 1,
        pageSize: 9999
    }
    console.log('查询前的query :>> ', query,);
    loading.value = true
    // return
    Api.Common.PcObjProcess.Do({ "functionName": "GetTodayRoomInfo", "orgCode": "0004", "contentData": query }).then(res => {
        console.log('查询当前桌台 res :>> ', res,)
        loading.value = false
        tableData.value = []
        // tableData.value =map(item=>{item.roomStateDesc == '使用中'})
        // 奇怪的数据结构
        res.result[0].areaRooms.forEach(item => {
            tableData.value.push(item)
            // if(item.roomStateDesc == '使用中'){
            //     tableData.value.push(item)
            // }
        }); 
        // total.value = res.totalCount
    })
}

// 初始化房台状态为使用中
const initStatus = () => { 
    searchForm.value.roomState = '2'
    searchForm.value.areaCode = ' '//此处一定是' ' 
} 
// 初始化默认今天
// const onChangeDate = (params) => { 
//     searchForm.value.timeRange = transformWorkTime(params,orgStartTime,orgEndTime) 
// }
// onChangeDate('今天')
initStatus()
getTableData()

// 点击多选事件
let multipleSelection = ref([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
    console.log('multipleSelection.value :>> ', multipleSelection.value);
}

// -------- 一键清台 ---------
const ResetAllVisible = ref(false)
// const FinishDayRef = ref()
const handleResetAll = () => {
    if (multipleSelection.value.length == 0) return ElNotification({
        title: '提示',
        message: '请选择桌台',
        type: 'warning',
    })
    ResetAllVisible.value = true
}
// 点击弹窗里的取消按钮
const emitResetAllCancel = (params) => {
    ResetAllVisible.value = false
}
// 点击弹窗里的确定按钮
const emitResetAllSubmit = (params) => {
    ResetAllVisible.value = false
    getTableData()
} 


const diglogvisible  = ref(false)
const lockText = ref('')

console.log(shopInfo.IsCloseMiniOrder,'shopInfo.isCloseMiniOrder')
if(shopInfo.IsCloseMiniOrder == true) {
    lockText.value = '关闭'
} else {
    lockText.value = '开启'
}

const handleRoom  = () => { 
       diglogvisible.value = true     
}
const handleSubmit = ()=> {
    Api.Common.PcObjProcess.Do({ "functionName": "MiniH5OrderOpen", "contentData": {"state":lockText.value ==='开启' ? 0 : 1} })
    .then(res => {
      ElNotification({
        title: '提示',
        message: '操作成功',
        type: 'success',
      })
      diglogvisible.value = false
      if(lockText.value == '开启') {
        lockText.value = '关闭'
    } else {
        lockText.value = '开启'
    }
    })
}

</script>
  
<style scoped lang="scss">
@import '@/styles/com_style_input.css';
/* 在这里编写组件的CSS样式 */
// .app-container {}
.search-form {
    width: 1520px;
    min-height: 80px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 20px 10px 0 40px;
    margin-bottom: 20px;

    // display: flex;
    .search-form-item {
   
        ::v-deep {
            .el-form-item__label {
                line-height: 40px;
            }

            .el-date-editor {
                width: 350px;

            }

            .el-input {
                width: 220px;
            }

            .el-input__wrapper {
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }

            .el-select__wrapper {
                width: 220px;
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }
        }
    }

    .range-item {
        .el-input {
            width: 130px;
        }
    }

    .action-btn-box {
        float: right;

        button {
            width: 120px;
            height: 48px;
            line-height: 48px;
            background: #FFE566;
            border-radius: 8px;
            border: 0;
            font-size: 16px;
            color: #212121;
        }

        .reset-btn {
            background: #E6E6E6;
            color: #666666;
        }
    }
}

.table-box {
    padding: 20px 40px;
    background: #FFFFFF;
    border-radius: 8px;
    width: 1520px;

    .total-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #212121;
    }
    
    .el-table--fit {
        height: 400px;
    }

    ::v-deep {
        .el-table__inner-wrapper::before {
            height: 0px;
        }

        .el-table__inner-wrapper {
            height: 600px;
        }

        .el-table th {
            font-size: 13px;
            font-weight: 700;
        }

        .el-table .el-table__header th,
        .el-table .el-table__header tr,
        .el-table .el-table__header td {
            height: 48px;
            background: #F9F9F9;
        }
    }

    .action-btn {
        width: 66px;
        height: 28px;
        border-radius: 4px;
        border: 1px solid #FF6A00;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #FF6A00;
    }
}

.pagination-box {
    margin-top: 20px;

    ::v-deep {
        .number {
            background: #E6E6E6 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #666666;
        }

        .number:hover {
            color: #FF6A00;
        }

        .is-active {
            background-color: #FF6A00 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #FFFFFF;
        }

    }
}

.color-FF6A00 {
    color: #FF6A00;
}

.page-title {
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #212121;
    margin-bottom: 30px;
}
::v-deep .el-table .cell {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 0.07292rem;
    color: #666666;
    line-height: 0.07292rem;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #ff6e0e; /* Checked box background color */
  border-color: #ff6e0e;     /* Border color */
}
::v-deep .el-checkbox__inner:hover{
    border-color: #ff6e0e; 
}

.diglog-ontainer {
    ::v-deep {
        .el-dialog__header {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 24px;
            color: #212121;
        }

        .el-dialog {
            width: 450px;
            height: 250px;
            background: #FFFFFF;
            border-radius: 16px;
        }
    }

    .content-box {
        text-align: center;
        margin-top: 10px;
        padding: 0 35px;
        font-family: Microsoft YaHei;
        font-size: 18px;
        color: #212121;
    }

    .footer-box {
        margin-top: 40px;
        display: flex;
        justify-content: center;

        .cancel {
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            font-size: 24px;
            color: #FF6A00;
        }

        .submit {
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            font-size: 24px;
            color: #FFFFFF;
            margin-left: 30px;
        }
    }
}
 
   
     .search-form-raodio {
        padding-right: 120px;
        .close-status {
            padding: 0 20px;
            height: 48px;
            line-height: 48px;
            background: #FFE566;
            border-radius: 8px;
            border: 0;
            font-size: 16px;
            color: #212121;
        }
        .el-switch-box {
        ::v-deep(.el-switch__label *) {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #212121;
      line-height: 16px;
    }

    ::v-deep(.el-switch__core) {
      width: 80px;
      height: 36px;
      border-radius: 18px;
    }
    ::v-deep(.el-switch.is-checked .el-switch__core) {
      background: #FF6A00;
      border-color: #FF6A00;
    }

    ::v-deep(.el-switch__core .el-switch__action) {
      width: 32px;
      height: 32px;
      background: #FFFFFF;
      border-radius: 50%;
    }

    ::v-deep(.el-switch.is-checked .el-switch__core .el-switch__action) {
      left: calc(100% - 33px)
    }
    }
     }
    
  
</style>
  